import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Descriptions, Button } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { createStyles } from 'antd-style';
import { resourceDetail } from '@/services/system/resource';

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
  },
  card: {
    borderRadius: '8px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
  },
  title: {
    fontSize: '16px',
    fontWeight: 500,
    marginBottom: '24px',
    borderLeft: `4px solid ${token.colorPrimary}`,
    paddingLeft: '12px',
  },
  buttonWrapper: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: '24px',
  },
  descriptions: {
    '.ant-descriptions-item': {
      paddingBottom: '16px',
    },
    '.ant-descriptions-item-label': {
      width: '120px',
      fontWeight: 500,
      color: '#666',
    },
  },
}));

const ResourceManageView: React.FC = () => {
  const { styles } = useStyles();
  const location = useLocation();
  const navigate = useNavigate();
  const [resourceData, setResourceData] = useState<any>({});
  const record = location.state?.record || {};

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await resourceDetail({ resourceId: record.id });
        if (response.code === 200) {
          setResourceData(response.data);
        }
      } catch (error) {
        console.error('获取详情失败:', error);
      }
    };

    if (record.id) {
      fetchData();
    }
  }, [record.id]);

  const handleBack = () => {
    navigate('/system/resourcemanage');
  };

  return (
    <PageContainer>
      <div className={styles.container}>
        <Card className={styles.card}>
          <div className={styles.title}>资源详情</div>
          <Descriptions column={2} className={styles.descriptions} bordered>
            <Descriptions.Item label="资源名称">{resourceData.resourceName}</Descriptions.Item>
            <Descriptions.Item label="资源别名">{resourceData.alias}</Descriptions.Item>
            <Descriptions.Item label="上级资源">{resourceData.parentResourceName || '顶级资源'}</Descriptions.Item>
            <Descriptions.Item label="路由地址">{resourceData.path}</Descriptions.Item>
            <Descriptions.Item label="资源类型">{resourceData.resourceType}</Descriptions.Item>
            <Descriptions.Item label="操作按钮类型">{resourceData.operationType}</Descriptions.Item>
            <Descriptions.Item label="资源标识">{resourceData.resourceId}</Descriptions.Item>
            <Descriptions.Item label="排序">{resourceData.sort}</Descriptions.Item>
            <Descriptions.Item label="是否显示">
              {resourceData.visible === 1 ? '是' : '否'}
            </Descriptions.Item>
            <Descriptions.Item label="是否打开新页面">
              {resourceData.isNewWindow === 1 ? '是' : '否'}
            </Descriptions.Item>
          </Descriptions>

          <div style={{ marginTop: '24px' }}>
            <Descriptions column={1} className={styles.descriptions} bordered>
              <Descriptions.Item label="资源备注">
                {resourceData.remark || '暂无备注'}
              </Descriptions.Item>
            </Descriptions>
          </div>

          <div className={styles.buttonWrapper}>
            <Button type="primary" onClick={handleBack}>
              返回
            </Button>
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};

export default ResourceManageView;
